import React from "react";
import "../css/InputBox.css";
import {PENDDING} from "./config"

class InputBox extends React.Component{
    constructor(props){
        super(props)
        
    };


    render(){
        console.log('inputBox',this.props)
        return(
            <div className="input_container">
                <div className="input_wrapper">
                    <div className="input_wrapper_left">TODOLIST</div>
                    <div className="input_wrapper_right">
                        <input className="input_wrapper_right_input"
                        ref="inputValue"/>
                        <button className="input_wrapper_right_btn"
                        onClick={()=>{
                            // 判空
                            if(this.refs.inputValue.value.length === 0){
                                alert('警告');
                                return;
                            }

                            // 组成对象
                            var todoObj = {
                                content:this.refs.inputValue.value,
                                status:PENDDING,
                            }
                            // console.log(this.props)
                            this.props.addtodo(todoObj)
                        }}>提交</button>
                    </div>
                </div>
            </div>
        )
    };
}


export default InputBox;